<!Doctype html>
<html>
<head>
<style>
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul li {
	min-width: 300px;
}
ul li a {
	display: block;
	font-size: 0.8em;
	color: #333;
	padding: .5em;
}
ul li a:hover {
	background: #eee;
}

</style>
<script>
chrome.tabs.getSelected(null, function(tab) {
	var bgPage = chrome.extension.getBackgroundPage();
	var feedTag = document.getElementById('feeds');

	for(var i in bgPage.feedData[tab.id]) {
		var feed = bgPage.feedData[tab.id][i];
		var li = document.createElement('li');
		var a = document.createElement('a');
		a.href=feed.href;
		a.innerHTML = "View feed: " + feed.title;
		a.onclick = function() {
			var feedUrl = bgPage.feedPageUrl + "?url=" + encodeURIComponent(this.href);
			chrome.tabs.create({url: feedUrl, index: tab.index+1});
         return false;
		};

		li.appendChild(a);

		feedTag.appendChild(li);
	}
});
</script>

</head>
<body>
	<ul id="feeds"></ul>
</body>
</html>
